<template>
  <div v-if="userName" class="app-login-info">
    <a-badge :count="9" v-if="!isNoticePage">
      <span class="message-box"></span>
    </a-badge>
    <a-avatar
      class="user-avatar"
      :src="src"
      @click.stop="userinfoVisible = true"
    ></a-avatar>
    <span class="text">{{ userName }}</span>
    <a-dropdown :overlayClassName="'login-info-menu'">
      <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
        <a-icon type="caret-down" />
      </a>
      <a-menu slot="overlay">
        <a-menu-item>
          <a href="javascript:;" @click="passwordVisible = true">
            <a-icon type="edit" style="margin-right: 10px" /> 修改密码</a
          >
        </a-menu-item>
        <a-menu-item>
          <a href="javascript:;" @click="signOut">
            <a-icon type="poweroff" style="margin-right: 10px" /> 退出登录</a
          >
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <p-change-userinfo
      v-if="userinfoVisible"
      :_visible.sync="userinfoVisible"
      @setAvatar="setAvatar"
    />
    <p-change-password
      v-if="passwordVisible"
      :_visible.sync="passwordVisible"
    />
  </div>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>